<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>惊喜礼物</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
            transition: background-color 0.5s;
            text-align: center;
            padding: 20px;
        }
        h1 {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 20px;
            animation: colorChange 2s infinite;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        p {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        button {
            padding: 15px 30px;
            font-size: 1.2rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            min-width: 200px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
        }
        button:hover, button:active {
            background-color: #45a049;
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(76, 175, 80, 0.5);
        }
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0;
            animation: fall linear forwards;
        }
        .popup {
            position: fixed;
            width: 80%;
            max-width: 300px;
            height: auto;
            background-color: #fff;
            border: 2px solid #333;
            border-radius: 15px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
            z-index: 1000;
            max-height: 80vh;
        }
        .popup h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #ff4444;
        }
        .popup p {
            font-size: 1rem;
            margin-bottom: 15px;
        }
        .popup button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 1rem;
            min-width: 120px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }
            p {
                font-size: 1rem;
            }
            button {
                font-size: 1.1rem;
                padding: 12px 25px;
            }
            .popup {
                width: 90%;
                padding: 15px;
            }
        }
        @keyframes colorChange {
            0% { color: #ff0000; }
            25% { color: #00ff00; }
            50% { color: #0000ff; }
            75% { color: #ffff00; }
            100% { color: #ff0000; }
        }
        @keyframes fall {
            0% {
                transform: translateY(-10vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .shaking {
            animation: shake 0.5s infinite;
        }
    </style>
</head>
<body>
    <h1>恭喜你!</h1>
    <p>你有一份神秘礼物，请点击下方按钮领取</p>
    <button id="claimBtn">领取礼物</button>

    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            const claimBtn = document.getElementById('claimBtn');
            const body = document.body;
            let isPranked = false;
            let popupCount = 0;
            const maxPopups = 15; // 最多弹出窗口数量
            let intervalId;
            let colorIntervalId;
            let shakeIntervalId;

            // 生成随机颜色
            function getRandomColor() {
                const letters = '0123456789ABCDEF';
                let color = '#';
                for (let i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

            // 生成随机位置
            function getRandomPosition(element) {
                const x = Math.random() * (window.innerWidth - element.offsetWidth);
                const y = Math.random() * (window.innerHeight - element.offsetHeight);
                return { x, y };
            }

            // 创建庆祝的彩屑
            function createConfetti() {
                const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
                for (let i = 0; i < 200; i++) {
                    const confetti = document.createElement('div');
                    confetti.classList.add('confetti');
                    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    confetti.style.width = `${Math.random() * 10 + 5}px`;
                    confetti.style.height = `${Math.random() * 10 + 5}px`;
                    confetti.style.left = `${Math.random() * 100}vw`;
                    confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
                    confetti.style.animationDelay = `${Math.random() * 2}s`;
                    document.body.appendChild(confetti);
                }
            }

            // 创建弹出窗口
            function createPopup() {
                if (popupCount >= maxPopups) return;
                
                const popup = document.createElement('div');
                popup.classList.add('popup');
                popup.innerHTML = `
                    <h3>惊喜!</h3>
                    <p>你被整蛊了!</p>
                    <button class="popupBtn">关闭</button>
                `;
                
                document.body.appendChild(popup);
                
                // 设置随机位置
                const pos = getRandomPosition(popup);
                popup.style.left = `${pos.x}px`;
                popup.style.top = `${pos.y}px`;
                
                popupCount++;
                
                // 点击关闭按钮时移除弹出窗口
                const closeBtn = popup.querySelector('.popupBtn');
                closeBtn.addEventListener('click', function() {
                    document.body.removeChild(popup);
                    popupCount--;
                    // 关闭一个窗口，再创建一个新窗口
                    setTimeout(createPopup, 100);
                });
            }

            // 开始整蛊效果
            claimBtn.addEventListener('click', function() {
                if (isPranked) return;
                isPranked = true;
                
                // 改变按钮文本
                claimBtn.textContent = '你被整蛊啦!';
                claimBtn.style.backgroundColor = '#ff0000';
                
                // 创建彩屑
                createConfetti();
                
                // 开始随机改变背景颜色
                colorIntervalId = setInterval(function() {
                    body.style.backgroundColor = getRandomColor();
                }, 200);
                
                // 开始随机创建弹出窗口
                intervalId = setInterval(createPopup, 500);
                
                // 页面震动效果
                shakeIntervalId = setInterval(function() {
                    body.classList.add('shaking');
                    setTimeout(function() {
                        body.classList.remove('shaking');
                    }, 500);
                }, 2000);
                
                // 播放提示音
                try {
                    const audio = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YYAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV');
                    audio.volume = 0.1;
                    audio.loop = true;
                    
                    // 在移动设备上自动播放音频可能受限，尝试多种方式
                    const playAudio = () => {
                        audio.play().catch(e => {
                            console.log('音频自动播放失败，等待用户交互');
                        });
                    };
                    
                    playAudio();
                    // 添加触摸事件监听器以触发音频播放
                    document.addEventListener('touchstart', playAudio, { once: true });
                } catch (e) {
                    // 如果音频播放失败，忽略错误
                }
            });
        });
    </script>
</body>
</html>
            });
        });
    </script>
</body>
</html>